
<template>
  <el-container class="home-container">
    <el-header>
      <el-row>
        <el-col :span="4">
          <p class="system-name"> {{ $t('title') }}</p>
        </el-col>

        <el-col :offset="12" :span="8" style="min-width: 150px">
          <span @click="langChange" class="encn">当前语言:{{ this.langChangeaa ? "cn" : "en" }}</span>

          <el-dropdown style="float: right; margin: 20px 10px" @command="hdCommand">



            <span class="el-dropdown-link" style="color: #fff; cursor: pointer">
              {{ list.name }} &nbsp;&nbsp;<i class="fa fa-caret-down fa-1x"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">修改密码</el-dropdown-item>
              <el-dropdown-item command="b">退出登入</el-dropdown-item>

            </el-dropdown-menu>
          </el-dropdown>

          <el-avatar shape="square" :src="list.avatar" style="margin: 10px; float: right"></el-avatar>
        </el-col>
      </el-row>

    </el-header>



    <el-container style="overflow: auto">

      <el-aside>
        <div class="toggle-button" @click="isCollapse = !isCollapse">
          <i v-if="isCollapse" class="el-icon-s-unfold"></i>
          <i v-if="!isCollapse" class="el-icon-s"></i>
        </div>

        <el-menu router :default-active="$route.path" class="el-menu-vertical-demo" :collapse="isCollapse">
          <el-menu-item :index="'/' + item.path" v-for="item in routerList">
            <i class="el-icon-house"></i>
            <span slot="title" v-if="langChangeaa">{{ item.name }}</span>
            <span slot="title" v-else="!langChangeaa">{{ item.en }}</span>
          </el-menu-item>
          <!-- <template v-for="item in routerList">
            <el-menu-item :index="'/' + item.path">
              <i class="el-icon-setting"></i>
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
            <el-submenu v-if="item.children.length">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{ item.name }}</span>
              </template> -->
          <!-- <el-menu-item-group>
                <el-menu-item :index="'/' + group.path" v-for="group in item.children">{{ group.name }}</el-menu-item>
              </el-menu-item-group> -->
          <!-- 
            </el-submenu>
          </template> -->
          <!-- <el-menu-item index="/booklist">
            <i class="el-icon-setting"></i>
            <span slot="title">证书列表</span>
          </el-menu-item>
          <el-menu-item index="/loginUpdate">
            <i class="el-icon-user"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>项目汇总表</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/program">制修订项目表</el-menu-item>

            </el-menu-item-group>

          </el-submenu>

          <el-menu-item index="/register">
            <i class="el-icon-user"></i>
            <span slot="title">证书领取登记表</span>
          </el-menu-item> -->



          <!-- 
          <el-menu-item index="/user/list" @click="saveActiveNav('/user/list')">
            <i class="el-icon-user"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-tickets"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
          <el-menu-item index="/course/list" @click="saveActiveNav('/course/list')">
            <i class="el-icon-notebook-1"></i>
            <span slot="title"> 课程管理</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-reading"></i>
            <span slot="title">文章管理</span>
          </el-menu-item> -->
        </el-menu>



      </el-aside>
      <el-main>

        <Breadcrumb style="margin: 5px; " />
        <slot></slot>

      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import Breadcrumb from "../components/Breadcrumb.vue";

import MenuItem from "@/views/MenuItem.vue";
export default {
  components: { Breadcrumb, MenuItem },
  data() {

    return {
      activePath: "",

      list: [],
      router: [],
      isCollapse: false,
      langChangeaa: true,
    }
  },
  created() {
    let lang = localStorage.getItem('lang')

    if (lang) {
      this.langChangeaa = lang === 'cn'
    }


    this.list = JSON.parse(localStorage.getItem("user"))
    // axios({
    //   url: 'http://43.143.166.235:8090/chaxun/info',
    //   headers: {
    //     'X-Litemall-Token': "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ0aGlzIGlzIGxpdGVtYWxsIHRva2VuIiwiYXVkIjoiTUlOSUFQUCIsImlzcyI6IkxJVEVNQUxMIiwiZXhwIjoxNzYyMDk2NzUzLCJ1c2VySWQiOjYsImlhdCI6MTY5ODkzODM1M30.sB-04xhSn_4Bjae_MT2nr0u0bvQGNLV11vf9hEVNd6A"
    //   }
    // }).then(res => {
    //   console.log(res)
    //   this.list = res.data.data
    //   if (this.list.name === 'admian') {
    //     axios({
    //       url: "http://43.143.166.235:8090/select/adminrouter",
    //     }).then(res => {
    //       console.log(res)
    //       this.router = res.data.list
    //     })
    //   } else {
    //     return 0
    //   }
    // })


  },
  methods: {

    langChange() {
      this.langChangeaa = !this.langChangeaa

      if (this.langChangeaa === true) {
        localStorage.setItem('lang', 'cn')
        this.$i18n.locale = "cn"
      } else {
        localStorage.setItem('lang', 'en')
        this.$i18n.locale = "en"
      }
    },



    loginout() {
      console.log("aa")
      // window.localStorage.clear()
      // this.$router.push({
      //   name: " login"
      // })
    },
    hdCommand(command, item) {

      if (command === 'a') {
        if (this.$route.path !== item.url) {
          this.$router.push({
            name: "loginUpdate"
          })
        }
        else {

          this.$router.push(route).catch(err => {
            console.log('输出报错', err)
          })
        }

      } else {

        window.localStorage.clear()
        this.$router.push({
          name: " login"
        })
      }
      // })
    },

    // saveActiveNava() {
    //   this.$router.push({
    //     name: 'homeaaa'
    //   })
    // },
    // saveActiveNavb() {
    //   this.$router.push({
    //     name: 'booklist'
    //   })
    // },
    // saveActiveNavc() {
    //   this.$router.push({
    //     name: 'loginUpdate'
    //   })
    // }

  },

  computed: {
    // 简写
    routerList() {

      return this.$store.state.router

    },




  }
}




</script>
<style scoped>
.mianbao {
  line-height: 20px;
  font-size: 15px;
}

.home-container {
  position: absolute;
  height: 100%;
  top: 0px;
  left: 0px;
  width: 100%;
  background: #f2f3f5;
}

.system-name {
  color: #fff;
  font-size: 18px;
}

.el-header {
  background-color: #B3C0D1;


}

.encn {
  font-size: 20px;
  position: absolute;
  top: 15px;


}

.toggle-button {
  background-color: #fff;
  font-size: 18px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
  color: black;
}

.el-aside {
  background-color: #fff;
  background: white;

  width: auto !important;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;

}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}




.container {
  height: calc(100vh - 60px);
}
</style>